<template>
  <div class="class-list table-theme">
    <el-card>
      <div class="class-list-menu">
        <div class="class-list-menu-left">
          <div class="all-check">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
              >全选</el-checkbox
            >
          </div>
          <div class="status-view">
            <el-select v-model="status" placeholder="上下架" @change="init(1)">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="status-view">
            <el-select v-model="is_customized" placeholder="定制" @change="init(1)">
              <el-option
                v-for="item in customizedList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="class-list-menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <div class="search-view">
            <el-input
              placeholder="请输入分类名字"
              v-model="searchContent"
              class="input-with-select"
              clearable
              @keyup.enter.native="init(1)"
              @clear="refreshPage"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="init(1)"
              ></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <p style="text-align: right; line-height: 30px">总数据数：{{ total }}</p>
      <div class="goods-list">
        <div class="goods-item" v-for="(item, index) in classList" :key="index">
          <div class="goods-checkbox">
            <el-checkbox v-model="item.checkbox" :disabled="item.disabled" @change="onDelCheckbox(item.class_id)"></el-checkbox>
          </div>
          <div class="goods-content" @click="checkboxClick(item)">
            <ImgPopover
              style="margin-top: 5px"
              :src="item.class_image"
            ></ImgPopover>
            <div class="text-info">
              <el-tooltip
                placement="top"
                effect="light"
                :content="item.class_name"
              >
                <p class="goods-name">分类名称：{{ item.class_name }}</p>
              </el-tooltip>
              <el-tooltip
                placement="top"
                effect="light"
                :content="item.space_name"
              >
                <p class="goods-sn">空间名称：{{ item.space_name }}</p>
              </el-tooltip>
              <p class="add-time">添加时间：{{ item.add_time }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
      <div style="padding: 20px 10px">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addFabricClick">确 定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  props: {
    layerid: {
      type: String,
      default: "",
    },
    shelf_id: {
      type: Number,
      default: 0,
    },
    goods_type: {
      type: Number,
      default: 0,
    },
  },
  components: {
    ImgPopover,
  },
  data() {
    return {
      searchContent: "",
      title: "添加分类",
      submitType: "", // 提交的类型 0 增加 1编辑
      imageUrl: "",
      spaceList: [],
      addDialog: false,
      classList: [],
      total: 0,
      totalData: 0,
      status: 1,
      statusList: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 2,
          label: "下架",
        },
      ],
      page: 0,
      checkAll: false,
      is_customized:0,
      customizedList: [
        {
          value: 0,
          label: "非定制",
        },
        {
          value: 1,
          label: "定制",
        },
      ],
      classCheckboxList:[],//保留选中
			allLength:0,
			classDisabledList:[]//回显已选中不给
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        class_status: this.status,
        store_id: localStorage.getItem("store_id"),
        is_customized: this.is_customized
      };
      if (this.searchContent != "") {
        data.keyword = this.searchContent;
      }
      this.onPushData();
      this.onSetData();
      this.$http(this.$ApiList.CategoryList, data).then((res) => {
        const { data, count } = res.datas
        this.classList = data.map(item=>{
          item.checkbox = false;
          item.disabled = false;
          return item;
        });
        this.total = count;
        this.totalData = count;
        this.onSelectState();
        this.onSetEcho();
        if(this.allLength === 10){
          this.checkAll = true;
        }else{
          this.checkAll = false;
        }
      });
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.status = 1;
      this.searchContent = "";
      this.init();
    },
    // 获取空间列表
    getSpace() {
      let data = {
        store_id: localStorage.getItem("store_id"),
      };
      this.$http(this.$ApiList.SelectSpace, data).then((res) => {
        if (res.code == 200) {
          this.spaceList = res.datas;
        }
      });
    },
    checkboxClick(item){
      if(item.disabled){
				this.$message.error('此分类已关联，请勿重复操作！')
				return false;
			}
			if (item.checkbox) {
				item.checkbox = false;
			} else {
				item.checkbox = true;
			}
    },
    handleCheckAllChange() {
      if (this.checkAll) {
        this.classList.forEach((item) => {
          item.checkbox = true;
        });
      } else {
        this.classList.forEach((item) => {
          if(!item.disabled){
            item.checkbox = false;
            this.onDelCheckbox(item.class_id)
          }
        });
      }
    },
    cancel() {
      this.$layer.close(this.layerid);
    },
    addFabricClick() {
        let classList = [];
        this.classList.forEach(item=>{
            if(item.checkbox){
                classList.push(item.class_id)
            }
        });
        if(!classList.length){
            this.$layer.msg('至少选择一个');
            return;
        }
        let data = {
            shelf_id:this.shelf_id,
            goods_type:this.goods_type,
            goods_ids:classList.join(',')
        };
        this.$http(this.$ApiList.ShelfGoodsAdd,data).then(res=>{
            this.$layer.msg(res.datas);
            this.init();
            this.checkAll = false;
            this.$parent.init();
            this.$layer.close(this.layerid);
        })
    },
    // 添加选中的数据
		onPushData(){
			this.classList.forEach(item => {
				if (item.checkbox) {
					this.classCheckboxList.push(item.class_id);
				}
			});
		},
		// 保留已选中的状态
		onSelectState(){
			let allLength = 0
			if(this.classCheckboxList.length){
				this.classList = this.classList.map(item=>{
					this.classCheckboxList.forEach(data=>{
						if(item.class_id == data){
							this.$set(item,'checkbox',true);
							allLength ++
						}
					})
					return item;
				})
			}
			this.allLength = allLength;
		},
		// 保留的数据去重
		onSetData(){
			if(this.classCheckboxList.length){
				this.classCheckboxList = Array.from(new Set(this.classCheckboxList));
			}
		},
		onDelCheckbox(goods_id){
			this.classCheckboxList.forEach((data,index)=>{
				if(data == goods_id){
					this.classCheckboxList.splice(index,1);
				}
			})
		},
		// 打开后回显
		initSelect(){
			let data = {
				page:0,
				shelf_id:this.shelf_id,
				goods_type:this.goods_type,
				order_by:"shelf_goods_id",
				asc:2,
				limit:100
			}
			this.classDisabledList = [];
			this.$http(this.$ApiList.ShelfGoodsList, data).then(res => {
				res.datas.data.forEach(item=>{
					this.classDisabledList.push(item.goods_id)
				})
			}).then(()=>{
				this.init();
			})
		},
		onSetEcho(){
			if(this.classDisabledList.length){
				this.classList.forEach(item=>{
					this.classDisabledList.forEach(data=>{
						if(item.class_id == data){
							this.$set(item,'checkbox',true);
							this.$set(item,'disabled',true);
						}
					})
				})
			}
		}
  },
  created() {
    this.getSpace();
    this.initSelect();
  },
};
</script>
<style lang="scss" scoped>
.class-list{
  width: 100%;
}
.class-list .class-list-menu {
  display: flex;
}
.class-list-menu .add {
  margin-right: 10px;
}
.class-list-menu-left .status-view {
  margin-left: 10px;
}
.class-list-menu-left {
  flex: 1;
  display: flex;
}
.class-list-menu-right {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}

.class-list-menu .status-view {
  width: 150px;
}
.class-list-menu .search-view {
  margin-right: 10px;
}
.all-check {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods-list {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  .goods-checkbox {
    width: 16px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
  .goods-item {
    padding: 15px 10px;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    width: 370px;
    height: 140px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    .goods-content {
      display: flex;
      .img-popover img {
        width: 100px !important;
        height: 100px !important;
      }
    }
  }
}
.text-info {
  width: 210px;
  margin-left: 10px;
  .goods-name,
  .goods-sn {
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .add-time {
    line-height: 30px;
  }
}
.text-bottom {
  display: flex;
  line-height: 30px;
}
.text-bottom p {
  flex: 1;
}
</style>
